import React from "react";
import { formatClassName } from "../utils/format";
import { View } from "@tarojs/components";

interface Props {
    className?: string;
    top?: number;
    left: number;
    color: string;
}

export const Pointer = ({ className, color, left, top = 0.5 }: Props) => {
    const nodeClassName = formatClassName(["react-colorful__pointer", className]);
    
    const style = {
        top: `${top * 100}%`,
        left: `${left * 100}%`,
    };

    return (
        <View className={nodeClassName} style={style}>
            <View className="react-colorful__pointer-fill" style={{ backgroundColor: color }} />
        </View>
    );
};
